{% extends 'base.html' %}

{% block title %}{{ goods.name }}{% endblock %}

{% block content %}
<div class="row">
    <!-- 商品图片区域 -->
    <div class="col-md-6">
        <div class="mb-3">
            <img src="{{ goods.cover_image.url }}" class="img-fluid rounded" alt="{{ goods.name }}">
        </div>

        {% if goods.detail_images.all %}
        <div class="row">
            {% for img in goods.detail_images.all %}
            <div class="col-md-4 mb-2">
                <img src="{{ img.image.url }}" class="img-fluid rounded" alt="商品详情图" style="height: 120px; object-fit: cover;">
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <!-- 商品信息区域 -->
    <div class="col-md-6">
        <h1>{{ goods.name }}</h1>

        <div class="mb-3">
            <span class="badge bg-primary fs-5">¥{{ goods.price }}</span>
        </div>

        <div class="mb-3">
            <p><strong>库存：</strong> {{ goods.stock }} 件</p>
        </div>

        <div class="mb-3">
            <strong>所属类别：</strong>
            {% for category in goods.categories.all %}
            <span class="badge bg-secondary">{{ category.name }}</span>
            {% endfor %}
        </div>

        <div class="mb-3">
            <strong>商品描述：</strong>
            <p class="mt-2">{{ goods.description|linebreaks }}</p>
        </div>

        <div class="mt-4">
            <button class="btn btn-primary btn-lg">加入购物车</button>
        </div>
    </div>
</div>

<!-- 评论区域 -->
<div class="mt-5">
    <h2>用户评论</h2>

    <!-- 评论表单 -->
    {% if user.is_authenticated %}
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">发表评论</h5>
            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <textarea name="{{ comment_form.content.html_name }}"
                              id="{{ comment_form.content.id_for_label }}"
                              rows="3"
                              class="form-control"
                              placeholder="请输入您的评论..."></textarea>
                    {% if comment_form.content.errors %}
                    <div class="text-danger">{{ comment_form.content.errors }}</div>
                    {% endif %}
                </div>
                <button type="submit" class="btn btn-primary">提交评论</button>
            </form>
        </div>
    </div>
    {% else %}
    <div class="alert alert-info">
        请<a href="{% url 'login' %}">登录</a>后发表评论
    </div>
    {% endif %}

    <!-- 评论列表 -->
    {% for comment in comments %}
    <div class="card mb-3">
        <div class="card-header">
            <strong>{{ comment.user.username }}</strong>
            <span class="text-muted float-end">{{ comment.created_at|date:"Y-m-d H:i" }}</span>
        </div>
        <div class="card-body">
            <p class="card-text">{{ comment.content }}</p>
        </div>
    </div>
    {% empty %}
    <p>暂无评论</p>
    {% endfor %}
</div>
{% endblock %}